<template>
  <div class="index-container">
    <div class="sider">
      <a href="#" class="logo"
        ><img src="~@/assets/images/logo02.png" alt="logo"
      /></a>
      <div class="user_info">
        <img :src="userinfo.userPic" alt="person" />
        <span>欢迎&nbsp;&nbsp;{{ userinfo.nickname }}</span>
        <b>管理员</b>
      </div>
      <!-- 左侧导航栏 -->
      <div class="menu">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#323745"
          text-color="#fff"
          router
        >
          <el-menu-item index="/mainCount">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="/articleList">
            <template slot="title">
              <i class="el-icon-tickets"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/articleList">文章列表</el-menu-item>
              <el-menu-item index="/articleRelease">发表文章</el-menu-item>
              <el-menu-item index="/articleCategory">文章类别管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/commentList">
            <i class="el-icon-document"></i>
            <span slot="title">评论管理</span>
          </el-menu-item>
          <el-menu-item index="/user">
            <i class="el-icon-user"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 顶部栏 -->
      <div class="header_bar">
        <div class="user_center_link">
          <a href="./user.html" target="main_frame">个人中心</a>
          <img :src="userinfo.userPic" alt="person" />
          <a href="javascript:void(0)" class="logout" @click="logout"
            ><i class="iconfont icon-tuichu"></i> 退出</a
          >
        </div>
      </div>
      <!-- 右侧主体内容 -->
      <div class="main" id="main_body">
        <!-- 二级路由的路由出口 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
// 导入获取用户信息接口
import { getUserInfo } from './home.js'
// 导入token.js
import { removeToken } from '@/utils/token.js'
import { mapState } from 'vuex'
export default {
  name: 'index',
  data () {
    return {
      // userinfo: {}
    }
  },
  methods: {
    logout () {
      this.$confirm('确定退出吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
          // 退出成功，删除token，跳转登录页
          removeToken()
          this.$router.push('/login')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    }
  },
  async created () {
    let res = await getUserInfo()
    // console.log(res);
    // 保存数据
    // this.userinfo = res.data.data
    // 保存数据到vuex
    this.$store.commit('editUserInfo', res.data.data)
  },
  computed: {
    ...mapState(['userinfo'])
  }
}
</script>

<style lang="less">
.index-container {
  .user_info {
    span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  #main_body{
    overflow-y: scroll;
  }
}
</style>
